<template>
	<!-- 模板需要一个根目录div -->
	<div>
		<!-- 面包屑 区域-->
		<el-breadcrumb separator-class="el-icon-arrow-right">
		  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
		  <el-breadcrumb-item>用户管理</el-breadcrumb-item>
		  <el-breadcrumb-item>用户列表</el-breadcrumb-item>
		</el-breadcrumb>
		
		<!-- 卡片区域  中间白色的就是卡片区域-->
		<el-card>
			<!-- 输入框区域 -->
			<el-row :gutter="20">
			  <el-col :span="8">
				  <!-- clear事件	在点击由 clearable 属性生成的清空按钮时触发(清空输入内容，并且自动显示所有数据) -->
				  <el-input placeholder="请输入内容" v-model="queryInfo.query" clearable @clear="clearSearch">
				      <el-button slot="append" icon="el-icon-search"  @click="searchUsers"></el-button>
				  </el-input>
			  </el-col>
			  <el-col :span="3">
				  <!-- dialogVisible: true   显示对话框-->
				  <el-button type="primary" @click="adddialogVisible = true">添加用户</el-button>
			  </el-col>
			</el-row>
			
			 <!-- 表格区域   当el-table元素中注入data对象数组后，在el-table-column中用prop属性来对应对象中的键名即可填入数据，用label属性来定义表格的列名 -->
				 <!-- border:开启边框线  -->
				 <!-- type	对应列的类型。如果设置了 selection 则显示多选框；如果设置了 index 则显示该行的索引（从 1 开始计算）；如果设置了 expand 则显示为一个可展开的按钮 -->
			<el-table :data="userlist" style="width: 100%" border>
				  <el-table-column type="index"></el-table-column>
			      <el-table-column prop="username" label="姓名"></el-table-column>
				  <el-table-column prop="email" label="邮箱"></el-table-column>
				  <el-table-column prop="mobile" label="电话"></el-table-column>
				  <el-table-column prop="role_name" label="角色"></el-table-column>
				  // 因为状态为true,而要显示开关形式,所以不能直接prop来获取  // el-switch 绑定v-model到一个Boolean类型的变量
				  // 这里需要用到作用域插槽(父组件对子组件的内容进行加工处理),使用template加上slot-scope="scope"
				  <el-table-column label="状态">
					<template slot-scope="scope">
						<!-- scope.row:获取这一行的数据(这个角色的所有数据) -->
						<!-- change事件:switch 状态发生变化时的回调函数	获得新状态的值 (修改用户状态(修改需要发送请求),为了刷新后继续是上一次开关的样子)-->
						<el-switch  v-model="scope.row.mg_state" @change="switchUserState(scope.row)"></el-switch>
					</template>
				  </el-table-column>
				  
				  <!-- 通过作用域插槽渲染操作数据 -->
				  <el-table-column label="操作"  width="180px">
					  <!-- 通过slot-scope来获取作用域插槽数据scope -->
					  <template  slot-scope="scope">
						    <!-- 修改按钮 -->
						    <el-button  type="primary" icon="el-icon-edit" size="mini" @click="editbutton(scope.row.id)"></el-button>
							<!-- 删除按钮 -->
							<el-button type="danger" icon="el-icon-delete" size="mini" @click="deletebutton(scope.row.id)"></el-button>
							<!-- tooltip文字提示 -->
							<el-tooltip effect="dark" content="分配角色" placement="top"  :enterable="false">
							      <!--分配角色按钮    :enterable="false"鼠标离开文字提示消失-->
							      <el-button type="warning" icon="el-icon-setting" size="mini" @click="showSetRoleDialog(scope.row)"></el-button>
							</el-tooltip>
					  </template>
				  </el-table-column>  
			</el-table>
			
			<!-- 分页区域 -->
			<el-pagination
			      @size-change="handleSizeChange"
			      @current-change="handleCurrentChange"
			      :current-page="queryInfo.pagenum"  
			      :page-sizes="[1, 2, 5, 7]"
			      :page-size="queryInfo.pagesize"  
			      layout="total, sizes, prev, pager, next, jumper"
			      :total="total">
			</el-pagination>
		</el-card>
		
		
		<!-- 添加用户按钮 ref 绑定控件，$refs 获取控件   rules：表单验证规则 :model绑定表单数据对象	-->
		<!--el-form中 rules：表单验证规则  el-form-item中 prop 属性设置为需校验的字段名即可 -->
		<!-- 重置操作 1.当对话框关闭后2.第二次打开没有记录   close事件中调用resetFields()即可清空重置 -->
		<el-dialog title="添加用户"  :visible.sync="adddialogVisible" width="50%" @close="addformclose">
		  <el-form ref="AddformRef" :model="Addform" label-width="80px" :rules="addformrules">
		    <el-form-item label="用户名" prop="username">
		      <el-input v-model="Addform.username"></el-input>
		    </el-form-item>
			<el-form-item label="密码"  prop="password">
			  <el-input v-model="Addform.password"></el-input>
			</el-form-item>
			<el-form-item label="邮箱"  prop="email">
			  <el-input v-model="Addform.email"></el-input>
			</el-form-item>
			<el-form-item label="手机号"  prop="mobile">
			  <el-input v-model="Addform.mobile"></el-input>
			</el-form-item>
		 </el-form>
		  <span slot="footer">
		    <el-button @click="adddialogVisible = false" >取 消</el-button>
		    <el-button type="primary" @click="addUser">确 定</el-button>
		  </span>
		</el-dialog>
		
		<!--编辑用户 对话框   ref 绑定控件，$refs 获取控件   rules：表单验证规则 :model绑定表单数据对象-->
		<!-- 重置操作 （取消）1.关闭对话框后清除内容  2.close事件中调用rersetFields()即可清空重置 -->
		<el-dialog title="编辑用户"  :visible.sync="editdialogVisible" width="50%" @close="editformclose">
		  <!-- 表单内容 -->
		  <el-form ref="editformRef" :rules="editRules" :model="editForm">
		    <el-form-item label="用户名" prop="username" label-width="80px">
		      <el-input v-model="editForm.username" disabled></el-input>
		    </el-form-item>
			<el-form-item label="邮箱"  prop="email"  label-width="80px">
			  <el-input v-model="editForm.email"></el-input>
			</el-form-item>
			<el-form-item label="手机号"  prop="mobile"  label-width="80px">
			  <el-input v-model="editForm.mobile"></el-input>
			</el-form-item>
		 </el-form>
		  <span slot="footer">
		    <el-button @click="editdialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="editUser">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	export default{
		data(){
			// 自定义验证规则（邮箱和手机号），然后验证规则处通过validator来接收验证变量
			// 邮箱的（定义一个变量来接收）rule:验证规则,value:需要验证的值,callback
			var checkEmail = ((rule,value,callback)=>{
				var reg =  /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
				if (reg.test(value)){
					callback()
				}else{
					callback(new Error('请输入正确的邮箱地址'))
				}
			})
			// 手机号码的
			var checkMobile = (rule,value,callback)=>{
				var reg =  /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/
				if (reg.test(value)){
					callback()
				}else{
					callback(new Error('请输入正确的手机号码'))
				}
			}
			return {
				//<!-- 用户列表 -->
				userlist:[],
				// 用户列表总条数
				total:0,
				// <!-- 用户列表请求的参数   query:查询参数  pagenum:当前页码  pagesize:每页显示条数-->
				queryInfo:{
					query: '',
					pagenum: 1,
					pagesize: 2
				},
				// 添加用户对话框是否显示
				adddialogVisible: false,
				// 添加用户表单数据对象  需要数据对象，因为需要带这些参数
				Addform:{
					username:'',
					password:'',
					email:'',
					mobile:''
				},
				// 添加用户表单验证
				addformrules:{
					username:[{required:true,message:'请输入用户名',trigger:'blur'},
							  {min:2,max:10,message:'请输入3-10个字符',trigger:'blur'}],
					password:[{required:true,message:'请输入密码',trigger:'blur'},
						      {min:6,max:15,message:'请输入6-15个字符',trigger:'blur'}],
					email:[{required:true,message:'请输入邮箱地址',trigger:'blur'},
						   {validator:checkEmail,trigger:'blur'}],
					mobile:[{required:true,message:'请输入手机号码',trigger:'blur'},
						    {validator:checkMobile,trigger:'blur'}]
				},
				// 修改：存储修改信息的用户信息  动态绑定这个属性，当修改后的数据会自动存放在editForm中
				editForm:{},
				// 添加用户对话框是否显示
				editdialogVisible:false,
				// 修改用户表单验证
				editRules:{
					email:[
						{required:true,message:'请输入邮箱地址',trigger:'blur'},
						{validator:checkEmail,trigger:'blur'}
					],
					mobile:[
						{required:true,message:'请输入手机号码',trigger:'blur'},
						{validator:checkMobile,trigger:'blur'}
					]
				}
			}
		},
		//<!--当页面打开后立即获取左侧菜单数据，所以需要添加生命周期函数 -->
		created(){
			this.getUserList()
		},
		methods:{
			// 获取表格列表数据
			async getUserList(){
				let {data:res} = await this.$http.get('users',{params:this.queryInfo})
				//操作: 退出登录,重新进来,然后点击用户列表,就会出现object对象,就是请求回来的数据
				console.log(res)
				// 获取数据成功后就渲染到页面上
				if (res.meta.status != 200) return this.$message.error(res.meta.status)
				this.userlist = res.data.users
				this.total = res.data.total
			},
			// 监听switchUserState开关状态
			async switchUserState(row){
				// ${row.id}  ${}:输出值  
				let {data:res} = await this.$http.put(`users/${row.id}/state/${row.mg_state}`)
				console.log(res)
				if (res.meta.status !== 200){
					row.mg_state = !row.mg_state
					return this.$message.error(res.meta.msg)
				}
				this.$message.success(res.meta.msg)
			},
			// 监听pagesize改变的事件
			handleSizeChange(newsize){
				// 获取当前选择的pagesize
				// console.log(newsize)
				// 改变data中pagesize的值
				this.queryInfo.pagesize = newsize
				// 重新发送修改请求
				this.getUserList()
			},
			// 监听页码值改变的事件
			handleCurrentChange(page){
				// console.log(page)
				this.queryInfo.pagenum = page
				this.getUserList()
			},
			// 清除input内容
			clearSearch(){
				// 当前查询参数为空
				this.queryInfo.query = ''
				// 当前页面保持第一页
				this.queryInfo.pagenum = 1
				this.getUserList()
			},
			// 点击搜索按钮
			searchUsers(){
				// 当前页码为第一页
				this.queryInfo.pagenum = 1
				this.getUserList()
			},
			// 添加用户信息关闭对话框事件
			addformclose(){
				//resetFields清空
				this.$refs.AddformRef.resetFields()
			},
			 addUser(){
				//表单预验证  validate（）函数  在函数里面valid进行验证，验证结果valid为true预验证通过   
				//验证成功后需要请求添加用户接口
				this.$refs.AddformRef.validate(async valid =>{
					if (!valid)return
					let {data:res} = await this.$http.post('users',this.Addform)
					console.log(res)
					if (res.meta.status != 201){
						return this.$message.error(res.meta.msg)
					}
					// 创建成功后关闭对话框  不显示
					this.adddialogVisible = false
					this.$message.success(res.meta.msg)
					// 重新刷新(渲染页面)
					this.getUserList()
				})
			},
			// 修改用户信息按钮事件
			async editbutton(id){
				// 根据id查询用户信息
				let {data:res} = await this.$http.get('users/' + id)
				console.log(res)
				if(res.meta.status != 200){
					return this.$message.error(res.meta.msg)
				}
				this.editForm = res.data
				this.editdialogVisible = true
			},
			// 编辑用户对话框重置函数
			editformclose(){
				this.$refs.editformRef.resetFields()
			},
			//编辑用户对话框提交编辑用户信息
			editUser(){
				// 首先先预验证validate(),函数里面valid进行验证,验证结果为true则通过
				this.$refs.editformRef.validate(async valid=>{
					// console.log(valid) 如果验证不通过，则返回，不发送编辑请求
					if(!valid)return
					// 发起编辑用户信息的数据请求
					// id在editForm   动态绑定这个属性editForm，当修改后的数据会自动存放在editForm中
					let {data:res} = await this.$http.put('users/'+ this.editForm.id,{email:this.editForm.email,mobile:this.editForm.mobile})
					console.log(res)
					if (res.meta.status != 200)return this.$message.error('res.meta.msg')
					// 关闭对话框
					this.editdialogVisible = false
					this.$message.success(res.meta.msg)
					// 重新获取列表数据
					this.getUserList()
					
				})
			},
			// 删除按钮  根据id删除对应的用户信息
			async deletebutton(id){
				// 提供一个删除弹框
				const confirmResult = await this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).catch(err=> err)
				// 如果用户确认删除，则返回值为字符串  confirm
				// 如果用户取消删除，则返回值为字符串  cancel
				// console.log(confirmResult)	
				if(confirmResult != 'confirm'){
					return this.$message.warning('已取消删除')
				}
				// 发送删除请求
				let {data:res} = await this.$http.delete('users/' + id)
				console.log(res)
				if (res.meta.status != 200){
					return this.$message.error(res.meta.msg)
				}
				this.$message.success(res.meta.msg)
				this.getUserList()
			}
		}
	}
</script>

<style>
</style>
